<template>
  <div class="format-font">
    <Modal v-model="assetActionModal" :closable="false" :footer-hide="true" :mask-closable="false" :title="action.title + '集群'" width="650">
      <el-form ref="form" :model="newAssetForm" label-width="130px" :rules="AssetFormRules">
        <el-form-item label="IP" prop="businessIp" size="small">
          <el-input v-model="newAssetForm.businessIp" placeholder="请输入业务IP地址" style="width: 400px" type="text"></el-input>
        </el-form-item>
        <el-form-item label="主机名" prop="hostname" size="small">
          <el-input v-model="newAssetForm.hostname" placeholder="请输入主机名" style="width: 400px" type="text"></el-input>
        </el-form-item>
        <el-form-item label="区域" prop="zone" size="small" style="width: 400px">
          <el-select
            v-model="newAssetForm.zone"
            size="mini"
            style="width: 400px"
            placeholder="请选择资产所在区域"
            class="form-item-width"
            :popper-append-to-body="false"
            popper-class="options-content"
          >
            <el-option v-for="item in zoneChoice" :key="item.value" :label="item.label" :value="item.value">{{ item.label }} </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="环境" prop="env" size="small" style="width: 400px">
          <el-select
            v-model="newAssetForm.env"
            size="mini"
            style="width: 400px"
            placeholder="请选择资产所处环境"
            class="form-item-width"
            :popper-append-to-body="false"
            popper-class="options-content"
          >
            <el-option v-for="item in envChoice" :key="item.value" :label="item.label" :value="item.value">{{ item.label }} </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="资产类型" prop="assetType" size="small" style="width: 400px">
          <el-select
            v-model="newAssetForm.assetType"
            size="mini"
            style="width: 400px"
            placeholder="请选择资产类型"
            class="form-item-width"
            :popper-append-to-body="false"
            popper-class="options-content"
          >
            <el-option v-for="item in assetTypeChoice" :key="item.value" :label="item.label" :value="item.value">{{ item.label }} </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="CPU" prop="cpu" size="small">
          <el-input-number v-model="newAssetForm.cpu" placeholder="请输入CPU核数" style="width: 400px" type="text"></el-input-number>
        </el-form-item>
        <el-form-item label="内存(G)" prop="memory" size="small">
          <el-input-number v-model="newAssetForm.memory" placeholder="请输入内存大小" style="width: 400px" type="text"></el-input-number>
        </el-form-item>

        <el-form-item label="备注信息" prop="comment" size="small">
          <el-input v-model="newAssetForm.comment" placeholder="请输入备注信息" style="width: 400px" type="textarea"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="ok('form')">{{ action.title }}资产信息</el-button>
          <el-button size="small" @click="cancel">取 消</el-button>
        </el-form-item>
      </el-form>
    </Modal>
  </div>
</template>

<script>
import { snakeCaseObject } from '@/libs/object'
import { createCmdbAsset, updateCmdbAsset } from '@/api/cmdb/asset'
import { errorNotify } from '@/libs/util'
import { zoneChoice, envChoice, assetTypeChoice } from '@/views/cmdb/config'
export default {
  name: 'AssetAction',
  props: {
    assetActionModal: {
      type: Boolean,
      default: false,
      require: true
    },
    assetInfo: {
      type: Object,
      default() {
        return {}
      }
    },
    action: {
      type: Object,
      default() {
        return {
          source: 'basic',
          title: '修改',
          type: 'update'
        }
      }
    }
  },
  data() {
    return {
      loading: false,
      AssetForm: {},
      newAssetForm: {},
      assetTypeChoice: [],
      envChoice: [],
      zoneChoice: [],
      AssetFormRules: {
        businessIp: [{ trigger: 'blur', required: true, message: '业务IP地址不能为空' }],
        hostname: [{ trigger: 'blur', required: true, message: '主机名不能为空' }],
        assetType: [{ trigger: 'blur', required: true, message: '资产类型不能为空' }],
        env: [{ trigger: 'blur', required: true, message: '资产所处环境不能为空' }],
        zone: [{ trigger: 'blur', required: true, message: '资产所处区域不能为空' }]
      }
    }
  },
  mounted() {
    this.setInitModelInfo()
    this.zoneChoice = zoneChoice(this)
    this.envChoice = envChoice(this)
    this.assetTypeChoice = assetTypeChoice(this)
  },
  methods: {
    cancel() {
      this.$emit('on-asset-change', { type: 'cancel', status: false })
    },
    ok(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          await this.actionAssetInfo()
        } else {
          return false
        }
      })
    },
    async actionAssetInfo() {
      const params = this.newAssetForm
      try {
        if (this.action.type === 'update') {
          const { data } = await updateCmdbAsset(this.newAssetForm.id, snakeCaseObject(params))
          this.$emit('on-asset-change', { type: this.action.type, status: false, assetId: data.id })
        } else if (this.action.type === 'create') {
          const { data } = await createCmdbAsset(snakeCaseObject(this.newAssetForm))
          this.$emit('on-asset-change', { type: this.action.type, status: false, assetId: data.id })
        } else {
          return false
        }
      } catch (e) {
        errorNotify(e)
      }
    },
    setInitModelInfo() {
      this.newAssetForm = this.$lodash.cloneDeep(this.assetInfo)
    }
  }
}
</script>

<style scoped>
</style>
